<template>
    <div class="Bussiness" style="border:white solid 0px ">
        <!--    <el-page-header @back="goBack" content="门店管理">-->
        <!--    </el-page-header>-->
        <div>
            骑手姓名:
            <el-input v-model="riderName" placeholder="请输入内容" style="width:150px;margin-right: 15px"></el-input>
            性别:
            <template>
                <el-select v-model="value" placeholder="请选择"  width="130" style="margin-right: 15px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            起始时间:
            <el-date-picker
                    v-model="start"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            结束时间:
            <el-date-picker
                    v-model="end"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button @click="es">搜索</el-button>
        </div>
        <div style="border:white solid 0px ">
            <el-table
                    :data="tableData"
                    height="250"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="骑手姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="骑手性别"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="注册时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderMoney"
                        label="接单总额">
                </el-table-column>
                <el-table-column
                        prop="orderNum"
                        label="接单总数">
                </el-table-column>
                <el-table-column
                        prop="deal"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="query(scope.row.code)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="骑手信息"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
            <div style="width: 800px;margin-right: 200px">
                <div>
                    <h3>骑手基本信息</h3><br>
                    骑手姓名：
                    <span>{{rider}}</span>

                    骑手性别：
                    <span>{{sex}}</span>

                    注册时间：
                    <span>{{time}}</span>

                    联系电话：
                    <span>{{phone}}</span>
                    <br>
                    <hr>


                </div>
                <div><h3>销售统计</h3>

                    <el-date-picker
                            v-model="countTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                    <el-button type="success" @click="queryOrder">查询</el-button>
                    <br>
                    今日单数：
                    <span>{{todayNum}}</span>
                    今日金额：
                    <span>{{todayMoney}}</span>
                    当月单数：
                    <span>{{monthNum}}</span>
                    当月金额：
                    <span>{{monthMoney}}</span>
                    <hr>
                </div>

                <div>
                    <h3>订单详情</h3>
                    <el-table
                            :data="tableData1"
                            height="250"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="number"
                                label="订单编号"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="allMoney"
                                label="订单总价"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="riderIncome"
                                label="骑手收入"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="finishTime"
                                label="完成时间"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                label="订单详情">
                            <template slot-scope="scope">
                                <!--                            <el-button @click="query(scope.row.details)" type="text" size="small">查看</el-button>-->
                                <span v-for="item in scope.row.details" :key="item" >{{item.name}}×{{item.num}}  {{item.price}}<br></span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: 'Rider',
        data() {
            return {
                tableData: [],
                tableData1: [],

                riderName:"",
                start:"",
                end:"",
                value:"",
                options: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                }],


                dialogVisible:false,
                businessCode:"",

                rider:"",
                sex:"",
                time:"",
                phone:"",

                countTime:"",
                todayNum:"",
                todayMoney:"",
                monthNum:"",
                monthMoney:"",

            }
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.axios.get("back/rider/findByItem").then(
                    r => {
                        this.tableData = r.data;
                    }
                )
            },
            es(){
                // console.log(this.value)
                this.axios.get("back/rider/findByItem",{params:{
                        name:this.riderName,
                        sex:this.value,
                        startTime:this.start,
                        endTime:this.end
                    }}).then(
                    r =>{
                        this.tableData = r.data;
                        this.riderName = "";
                        this.value= "";
                        this.start = "";
                        this.end = "";
                    }
                )
            },

            query(businessId){
                this.businessCode = businessId;
                this.dialogVisible = true;
                this.queryRider(businessId);

            },
            queryRider(businessId){
                this.axios.get("back/rider/findById",{params:{id:businessId}}).then(
                    r =>{
                        this.rider = r.data.name;
                        this.sex = r.data.sex;
                        this.time = r.data.time;
                        this.phone = r.data.phone;
                    }
                )
            },
            queryOrder(){
                // console.log(this.businessCode);
                // console.log(this.countTime);
                this.queryOrderInfo()
                this.axios.get("back/order/orderCount",{params:{
                        code:this.businessCode,
                        time:this.countTime,
                        who:"rider",
                    }}).then(
                    r => {
                        this.todayNum = r.data.todayNum;
                        this.todayMoney = r.data.todayMoney;
                        this.monthNum = r.data.monthNum;
                        this.monthMoney = r.data.monthMoney;
                    }
                )
            },
            queryOrderInfo(){
                this.axios.get("back/order/orderInfo",{params:{
                        code:this.businessCode,
                        time:this.countTime,
                        who:"rider",
                    }}).then(
                    r => {
                        this.tableData1 = r.data;
                    }
                )
            },
            handleClose(){
                this.dialogVisible = false;
                this.countTime = "";
                this.todayNum = "";
                this.todayMoney = "";
                this.monthNum = "";
                this.monthMoney = "";
                this.tableData1 = [];

            },

        }
    }
</script>


<style scoped>
    div {
        border: black solid 1px;
        margin: 2px 2px 2px 2px
    }
    span{
        margin-right: 5px;
        margin-top: 5px;
    }
</style>